<template>
	<view>
		<!--申请者-->
		<block v-if="is_flag==0&&loading==true">
			<view class="cardBox" >
				<view class="flex" style="margin-top: 10rpx;">
					<view class="biao" style="width: 100%;display: flex;">
						<span class="biao_span">|</span> 
						<text class="cardTitle">{{text.title}} </text> 
					</view>
				</view>
				<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
					<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_no}} : {{order.orderInfo.order_no}}</view>
					<view class="cardTitle" style="font-size: 28rpx;margin-top: 10rpx;">{{text.order_type}} : {{order_type}}</view>	
				</view>
			</view>
			
			<view class="cardBox" >
				<view class="flex" style="margin-top: 10rpx;">
					<view class="biao" style="width: 100%;display: flex;">
						<span class="biao_span">|</span> 
						<text class="cardTitle">{{text.close_reason}} </text> 
					</view>
				</view>
				<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
					<u-form-item >
						<u-input v-model="formData.close_reason" :placeholder="text.close_reason_placeholder"
							:value="formData.close_reason ? formData.close_reason : ''" :custom-style="textareaStyle" height="100"
							type="textarea" maxlength="1500" />
						</u-form-item>
				</view>
			</view>
			
			<view class="cardBox" >
				<view class="flex" style="margin-top: 10rpx;">
					<view class="biao" style="width: 100%;display: flex;">
						<span class="biao_span">|</span> 
						<text class="cardTitle">{{text.upload_pic}} </text> 
					</view>
				</view>
				<view  style="margin-top: 10rpx;padding-bottom: 20rpx;">
					<formImages :item="{required:false,key:'images'}" @change="selImages" />
				</view>
			</view>
			
			<u-button class="button-wrap" @click="tijiao" style="float: right;margin-right: 15rpx;" :custom-style="customStyle0" hover-class="none" :disabled="subDisabled" type="primary"
				>
				{{ $t('提交') }}
			</u-button>
			<view style="clear: both;"></view>
		</block>
		
		<!--回复人-->
		<block v-if="is_flag==1&&loading==true">
			<orderCommon :order="order" :text="text" :is_close_user="true" :is_stop="0"></orderCommon>
			<view style="margin-top: 10rpx;padding-bottom: 20rpx; width: 94%;margin-left: 3%; ">	
				<u-button class="button-wrap" @click="tongyi"  style="float: right;margin-right: 15rpx;" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('同意') }}
				</u-button>
				<u-button class="button-wrap"  @click="jujue" style="float: right;margin-right: 15rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('拒绝') }}
				</u-button>
				<u-button class="button-wrap" @click="lianxi(close_user.mobile)" style="float: right;margin-right: 15rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('即时联系') }}
				</u-button>
				<view style="clear: both;"></view>
			</view>
		</block>
		
		
		<!--申请人提交后 等待-->
		<block v-if="is_flag==2&&loading==true">
			<orderCommon :order="order" :text="text" :is_close_user="true" :is_stop="0"></orderCommon>
			<view style="margin-top: 10rpx;padding-bottom: 20rpx; width: 94%;margin-left: 3%; ">	
				<u-button class="button-wrap" style="float: right;margin-right: 15rpx;" :custom-style="customStyle3" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('等待对方处理') }}
				</u-button>
				<u-button class="button-wrap" @click="chexiao()" style="float: right;margin-right: 15rpx;" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('撤销申请') }}
				</u-button>
				<u-button class="button-wrap" @click="lianxi(do_user.mobile)" style="float: right;margin-right: 15rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
					>
					{{ $t('即时联系') }}
				</u-button>
				<view style="clear: both;"></view>
			</view>
		</block>
		
		
		<!--申请人  与 发布人 完成-->
		<block v-if="is_flag==3&&loading==true">
			<orderCommon :order="order" :text="text" :is_close_user="false" :is_stop="0"></orderCommon>
			
			
			<view class="cardBox" >
				<view  style="width: 100%;">
					<image :src="IMAGE_URL+do_user.avatar" class="close_image2"></image>
					<view style="line-height: 140rpx;float: left;">
						<block v-if="lang==='zh'">{{do_user.username}}</block>
						<block v-if="lang==='ru'">{{do_user.username_ru}}</block>
					</view>
					<view style="line-height: 140rpx;float: right;">
						<text v-if="do_user.id!=order.user_id" @click="lianxi(do_user.mobile)" style="background-color: orange;color: #fff;border-radius: 10rpx;padding: 5px 10px;">
							{{ $t('即时联系') }} 
						</text>
					</view>
					<view style="clear: both;"></view>
					
					<view style="margin-top: 10rpx;">
						<block v-if="order.orderInfo.close_status==1">{{text.apply_agree}}</block>
						<block v-if="order.orderInfo.close_status==2">{{text.apply_no_agree}}</block>
						<block v-if="order.orderInfo.close_status==3">{{text.apply_no_agree}}</block>
					</view>
					
					
					<view style="margin-top: 10rpx;padding-bottom: 20rpx;color: #999;" v-if="order.orderInfo.close_status_time"><!-- {{text.submit_time}} : -->
					{{timestampToDate(order.orderInfo.close_status_time*1000)}}</view>
				</view>
			</view>
			
			<block v-if="order.orderInfo.close_status==1">
				<view class="cardBox" >
					<view class="flex" style="margin-top: 10rpx;">
						<view class="biao" style="width: 100%;display: flex;">
							<span class="biao_span">|</span> 
							<text class="cardTitle">{{text.system}} </text> 
						</view>
					</view>
					<view style="margin-top: 10rpx;padding-bottom: 20rpx;">{{text.apply_complete}}</view>
				</view>
			</block>
			<block v-if="order.orderInfo.close_status==2">
				<block v-if="order.user_id == order.orderInfo.close_user_id">
					<u-button class="button-wrap" @click="jixu" style="float: right;margin-right: 20rpx;" :custom-style="customStyle2" hover-class="none" :disabled="subDisabled" type="primary"
						>
						{{ $t('继续交易') }}
					</u-button>
					
					<u-button class="button-wrap" @click="pingtai" style="float: right;margin-right: 20rpx;" :custom-style="customStyle1" hover-class="none" :disabled="subDisabled" type="primary"
						>
						{{ $t('平台介入') }}
					</u-button>
				</block>
				<block v-if="order.user_id != order.orderInfo.close_user_id">
					<view class="cardBox" >
						<view class="flex" style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle">{{text.system}} </text> 
							</view>
						</view>
						<view style="margin-top: 10rpx;padding-bottom: 20rpx;">{{text.apply_complete_no}}</view>
					</view>
				</block>
			</block>
			
			<block v-if="order.orderInfo.close_status==3">
				<block v-if="order.user_id != order.orderInfo.close_user_id">
					<view class="cardBox" >
						<view class="flex" style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle">{{text.system}} </text> 
							</view>
						</view>
						<view style="margin-top: 10rpx;padding-bottom: 20rpx;">{{text.apply_complete_no}}</view>
					</view>
					<view class="cardBox" >
						<view class="flex" style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle">{{text.system}} </text> 
							</view>
						</view>
						<view style="margin-top: 10rpx;padding-bottom: 20rpx;">{{text.apply_complete_jixu1}}</view>
					</view>
				</block>
				<block v-if="order.user_id == order.orderInfo.close_user_id">
					
					<view class="cardBox" >
						<view class="flex" style="margin-top: 10rpx;">
							<view class="biao" style="width: 100%;display: flex;">
								<span class="biao_span">|</span> 
								<text class="cardTitle">{{text.system}} </text> 
							</view>
						</view>
						<view style="margin-top: 10rpx;padding-bottom: 20rpx;">{{text.apply_complete_jixu2}}</view>
					</view>
				</block>
			</block>
			
			
		</block>
		
		<view style="height: 100px;"></view>
		
	</view>
</template>

<script>
	import {HTTP_REQUEST_URL,HTTP_IMG_UTL,IMAGE_URL} from "@/config/app";
	import formImages from "@/components/buildForm/formImages.vue";
	import orderCommon from "./close/orderCommon.vue";
	import {
		ImageUrl,
		isVideo,
		time,createC2CConversation
	} from "@/common/public";
	export default {
		components: {
			formImages,orderCommon
		},
		props:{
			
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,
				
				//语言
				lang: this.$i18n.locale,
				//文字
				text:{			
					title:this.$t('申请关闭订单'),
					order_no:this.$t('订单编号'),
					order_type:this.$t('订单类型'),
					close_reason:this.$t('关闭原因'),
					close_reason_placeholder:this.$t('请输入终止原因'),
					upload_pic:this.$t('上传照片'),
					submit_user:this.$t('提交人'),
					submit_time:this.$t('提交时间'),
					automatic_agree:this.$t('72:00:00后自动同意'),
					apply_agree:this.$t('同意关闭订单申请'),
					apply_no_agree:this.$t('拒绝关闭订单申请'),
					system:this.$t('系统提示'),
					apply_complete:this.$t('申请通过,订单已关闭'),
					apply_complete_no:this.$t('您已拒绝终止交易申请,等待对方处理'),
					apply_complete_jixu1:this.$t('对方选择继续交易，订单将正常进行'),
					apply_complete_jixu2:this.$t('你已选择继续交易，订单将正常进行'),
				},
				
				formData:{
					close_reason:''
				},
				subDisabled:false,
				textareaStyle: {
					// padding: "20rpx",
					height: "100rpx"
				},
				//底部导航按钮
				customStyle0: {
					width: '255rpx',
					fontSize:"20rpx",
					height: '83rpx',
					marginTop:'20rpx',
					marginRight:'20rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					borderRadius: '56rpx'
				},
				customStyle1: {
					width: '255rpx',
					fontSize:"20rpx",
					height: '83rpx',
					marginTop:'20rpx',
					marginRight:'20rpx',
					background: '#ff2323',
					borderRadius: '56rpx'
				},
				customStyle2: {
					width: '255rpx',
					fontSize:"20rpx",
					height: '83rpx',
					marginTop:'20rpx',
					marginRight:'20rpx',
					background: '#008aff',
					borderRadius: '56rpx'
				},
				
				customStyle3: {
					width: '255rpx',
					fontSize:"20rpx",
					height: '83rpx',
					marginTop:'20rpx',
					marginRight:'20rpx',
					background: '#cccccc',
					borderRadius: '56rpx'
				},
				
				is_flag:0,//标志位
				
				join_order_id:0, //参与订单id
				
				loading:false,
				order:{},
				order_type:'',
				
				//关闭订单用户
				close_user:{},
				//操作人
				do_user:{}
				
			}
		},
		onLoad(options) {
			this.join_order_id = options.join_order_id
			this.getCooperationOrderDetail()
		},
		onShow() {
			this.getCooperationOrderDetail()
		},
		methods:{
			selImages(e,data){
				console.log(e,data)
				if(data){
					this.formData.close_reason_img=data
				}
			},
			//合作订单详情
			getCooperationOrderDetail(){
				const that = this
				that.$u.api.order.getCooperationOrderDetail({
					id: that.join_order_id,
					lang:that.lang
				}).then(res => {
					that.order=res
					if((that.order)&&(that.order.orderInfo.close_reason_time==null)){
						that.is_flag=0
					}
					
					if(that.order.user_id !=that.order.orderInfo.close_user_id){
						
						if((that.order)&&(that.order.orderInfo.close_reason_time!=null)){
							that.is_flag=1
						}
						
						//被申请人 页面 联系人
						if(that.order.orderInfo.close_user_id == that.order.release_user.id){
							that.close_user = that.order.release_user
							that.do_user = that.order.join_user
						}else{
							that.close_user = that.order.join_user
							that.do_user = that.order.release_user
						}
						
						if((that.order)&&(that.order.orderInfo.close_status==1||that.order.orderInfo.close_status==2||that.order.orderInfo.close_status==3)){
							that.is_flag=3
							//操作人
							if(that.order.orderInfo.close_user_id == that.order.release_user.id){
								that.do_user = that.order.join_user
							}else{
								that.do_user = that.order.release_user
							}
							
						}
						
					}else{
						
						if((that.order)&&(that.order.orderInfo.close_reason_time!=null)){
							that.is_flag=2
						}

						//申请人 页面 联系人
						if(that.order.orderInfo.close_user_id == that.order.release_user.id){
							that.close_user = that.order.release_user
							that.do_user = that.order.join_user
						}else{
							that.close_user = that.order.join_user
							that.do_user = that.order.release_user
						}
						
						if((that.order)&&(that.order.orderInfo.close_status==1||that.order.orderInfo.close_status==2||that.order.orderInfo.close_status==3)){
							that.is_flag=3
							if(that.order.orderInfo.close_user_id == that.order.release_user.id){
								that.do_user = that.order.join_user
							}else{
								that.do_user = that.order.release_user
							}
						}
					
					}
					
					
					if(that.order.orderInfo.type=='goods'){
						that.order_type=that.$t('货物')
					}else if(that.order.orderInfo.type=='transport'){
						that.order_type=that.$t('运输')
					}else if(that.order.orderInfo.type=='crossborder'){
						that.order_type=that.$t('跨境货代')
					}else if(that.order.orderInfo.type=='professional'){
						that.order_type=that.$t('专业代办')
					}
					
					that.loading=true
				
				})
			},
			tijiao(){
				const that = this
				if(that.formData.close_reason==''){
					uni.showModal({
						content: that.$t('请输入内容'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					return false;
				}
				that.$u.api.order.closeReason({
					order_id: that.order.orderInfo.id,
					close_reason:this.formData.close_reason,
					close_reason_img:this.formData.close_reason_img,
					lang:that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					setTimeout(function() {
						that.getCooperationOrderDetail()
					}, 2000);
					return false;
				})
			},
			lianxi(mobile){
				createC2CConversation(mobile, this)
			},
			chexiao(){
				const that = this
				that.$u.api.order.closeOrderCancle({
					order_id: that.order.orderInfo.id,
					lang:that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
					return false;
				})
			},
			tongyi(){
				const that = this
				that.$u.api.order.closeOrderAgree({
					order_id: that.order.orderInfo.id,
					lang:that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					setTimeout(function() {
						uni.navigateBack();
						
					}, 2000);
					return false;
				})
			},
			jujue(){
				const that = this
				that.$u.api.order.closeOrderNoAgree({
					order_id: that.order.orderInfo.id,
					lang:that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					setTimeout(function() {
						uni.navigateBack();
						
					}, 2000);
					return false;
				})
			},
			timestampToDate(timestamp) {
			  const date = new Date(timestamp); // 如果timestamp是数值，可以直接作为Date构造函数的参数
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			pingtai(){
				if(this.lang==='zh'){
					createC2CConversation(getApp().globalData.site.im_customer001, this,true)
				}else{
					createC2CConversation(getApp().globalData.site.im_customer002, this,true)
				}
			},
			jixu(){
				const that = this
				that.$u.api.order.closeOrderJixu({
					order_id: that.order.orderInfo.id,
					lang:that.lang
				}).then(res => {
					uni.showModal({
						content: that.$t('操作成功'),
						showCancel: false,
						confirmText: that.$t('是'),
					})
					setTimeout(function() {
						uni.navigateBack();
						
					}, 2000);
					return false;
				})
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("订单详情")
			})
		},
	}
</script>

<style lang="scss" scoped>
	.cardBox {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 30rpx;
		position: relative;
	}
	.flex{width: 100%;display: flex;}
	.biao{margin-top: 0rpx; width: 80%; margin-left: 0rpx;font-size: 30rpx;  font-weight: bold;}
	.biao_span{color:darkorange ; font-size: 18px; margin-right: 5px;}
	.cardTitle{font-size: 24rpx; width: 94%;padding-top: 6rpx;}
	.order_img{width: 160rpx;height: 160rpx;border-radius: 20rpx;}
	.close_image2{
		width: 120rpx;height: 120rpx;border-radius: 20rpx; margin-right: 20rpx; margin-top: 20rpx; float: left;
	}
	.button-wrap {
	  white-space: normal; /* 允许文本换行 */
	  word-break: break-all; /* 如果需要在任意字符间断开，使用这个属性 */
	  line-height: 24rpx;
	}
</style>